/** 全局css 变量，这种变量不仅可以在css 和scss中使用 还可以导入到JS中使用 */
:root {
  /** 全局背景色 */
  --xy-body-color: #f0f2f5;
  --xy-primary-color: #ff7880;
  --xy-primary-light-color: #ffe2e3;
  --xy-normal-text-color: #303133;
  --xy-medium-text-color: #606266;
  --xy-grey-text-color: #909399;
  --xy-light-color: #e4e7ed;
  --xy-hover-color: #f5f5f5;
  --xy-warning-color: #e6a23c;
  --xy-warning-light-color: #f3860a;
  --xy-success-color: #68c23b;
  --xy-danger-color: #ff7880;
  --xy-white-color: #fff;
  --xy-normal-color: #999999;
  --xy-disabled-color: #d6d6d6;
  --xy-hover-bg-color: rgba(255, 109, 117, 0.2);
  --xy-hover-text-color: #ff7880;
  --xy-color-blue: #409eff;
  /** NavigationBar 组件 */
  --xy-header-bg-color: #fff;
  --xy-navigationbar-height: 64px;
  --xy-header-height: calc(var(--xy-navigationbar-height) + var(--xy-tab-height));
  /** menu组件 */
  --xy-menu-width: 200px;
  --xy-menu-item-height: 48px;
  --xy-menu-bg-color: var(--xy-white-color);
  --xy-menu-hover-bg-color: var(--xy-hover-color);
  --xy-menu-text-color: var(--xy-normal-text-color);
  --xy-menu-active-text-color: var(--xy-primary-color);
  --xy-menu-active-bg-color: var(--xy-primary-light-color);
  --xy-sub-menu-active-text-color: var(--xy-primary-color);
  --xy-sub-menu-active-bg-color: var(--xy-body-color);
  /** tab组件 */
  --xy-tab-height: 48px;
  --xy-tab-text-color: var(--xy-normal-text-color);
  --xy-tab-bg-color: var(--xy-white-color);
  --xy-tab-active-text-color: var(--xy-normal-text-color);
  --xy-tab-active-bg-color: var(--xy-hover-color);
  --xy-tab-hover-text-color: var(--xy-normal-text-color);
  --xy-tab-hover-bg-color: var(--xy-hover-color);
  --xy-tab-border-radius: 0px 0px 2px 2px;

  /** elemnt-plus */
  --el-color-primary: var(--xy-primary-color);
  --el-color-primary-light-9: var(--el-color-primary);
  --el-color-primary-light-7: var(--xy-menu-active-bg-color);
  --el-color-primary-light-5: var(--xy-hover-bg-color);
  --el-color-primary-light-3: var(--xy-hover-bg-color);
  --el-color-primary-dark-2: var(--xy-hover-bg-color);
}
